<!--
 * @Author: your name
 * @Date: 2021-04-07 17:00:47
 * @LastEditTime: 2021-05-30 15:39:24
 * @LastEditors: Please set LastEditors
 * @Description: 上市产品数据统计
 * @FilePath: /medicine-web/src/views/document/statitics/index.vue
-->
<template>
  <div class="document-statitics-container">
    <p class="font-pattern-8">数据统计</p>
    <!-- <customDateRanger @selectTimeRange="timeRange"></customDateRanger> -->
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__one'" :chartTitle="'瘤种类型年化对比'" :chartData="chartData1"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__two'" :chartTitle="'溶瘤病毒类型年化对比'" :chartData="chartData2"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 49%">
        <pieChart2 :elementId="'pie-chart__two'" :chartTitle="'T-VEC'" :chartData="chartData6"></pieChart2>
      </a-col>
      <a-col style="width: 49%">
        <pieChart2 :elementId="'pie-chart__one'" :chartTitle="'重组人5型腺病毒'" :chartData="chartData5"></pieChart2>
        <!-- <pieChart :elementId="'pie-chart__one'" :chartTitle="'溶瘤病毒/肿瘤类型统计'" :outterData="outterData" :innerData="innerData"></pieChart> -->
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__four'" :chartTitle="'模块'" :chartData="chartData3"></lineChart>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import customDateRanger from '@/components/CustomDateRanger/index'
import lineChart from '@/components/Charts/LineChart'
import pieChart from '@/components/Charts/PieChart'
import pieChart2 from '@/components/Charts/PieChart2'
import lineShadowChart from '@/components/Charts/LineShadowChart'
export default {
  name: 'proStatitics',
  components: { customDateRanger, lineChart, pieChart, pieChart2, lineShadowChart },
  data () {
    return {
      chartData1: [
        // { color: '#6495F9',  year: '2009年', type: '肝癌', data: 820 },
        // { color: '#6495F9',  year: '2009年', type: '恶性胸腹水', data: 932 },
        // { color: '#6495F9',  year: '2009年', type: '头颈部癌', data: 901 },
        // { color: '#6495F9',  year: '2009年', type: '黑色素瘤', data: 934 },
        // { color: '#6495F9',  year: '2009年', type: '肺癌', data: 1290 },
        // { color: '#6495F9',  year: '2009年', type: '宫颈癌', data: 1330 },
        // { color: '#6495F9',  year: '2009年', type: '胶质瘤', data: 1320 },
        // { color: '#6495F9',  year: '2009年', type: '其他', data: 1600 },
        // { color: '#62DAAA',  year: '2010年', type: '肝癌', data: 720 },
        // { color: '#62DAAA',  year: '2010年', type: '恶性胸腹水', data: 332 },
        // { color: '#62DAAA',  year: '2010年', type: '头颈部癌', data: 201 },
        // { color: '#62DAAA',  year: '2010年', type: '黑色素瘤', data: 914 },
        // { color: '#62DAAA',  year: '2010年', type: '肺癌', data: 1190 },
        // { color: '#62DAAA',  year: '2010年', type: '宫颈癌', data: 1530 },
        // { color: '#62DAAA',  year: '2010年', type: '胶质瘤', data: 1320 },
        // { color: '#62DAAA',  year: '2010年', type: '其他', data: 1320 },
        // { color: '#5F7293',  year: '2011年', type: '肝癌', data: 720 },
        // { color: '#5F7293',  year: '2011年', type: '恶性胸腹水', data: 632 },
        // { color: '#5F7293',  year: '2011年', type: '头颈部癌', data: 901 },
        // { color: '#5F7293',  year: '2011年', type: '黑色素瘤', data: 834 },
        // { color: '#5F7293',  year: '2011年', type: '肺癌', data: 990 },
        // { color: '#5F7293',  year: '2011年', type: '宫颈癌', data: 1230 },
        // { color: '#5F7293',  year: '2011年', type: '胶质瘤', data: 1520 },
        // { color: '#5F7293',  year: '2011年', type: '其他', data: 1400 },
      ],
      chartData2: [
        // { color: '#6495F9',  year: '2009年', type: '肝癌', data: 820 },
        // { color: '#6495F9',  year: '2009年', type: '恶性胸腹水', data: 932 },
        // { color: '#6495F9',  year: '2009年', type: '头颈部癌', data: 901 },
        // { color: '#6495F9',  year: '2009年', type: '黑色素瘤', data: 934 },
        // { color: '#6495F9',  year: '2009年', type: '肺癌', data: 1290 },
        // { color: '#6495F9',  year: '2009年', type: '宫颈癌', data: 1330 },
        // { color: '#6495F9',  year: '2009年', type: '胶质瘤', data: 1320 },
        // { color: '#6495F9',  year: '2009年', type: '其他', data: 1600 },
        // { color: '#62DAAA',  year: '2010年', type: '肝癌', data: 720 },
        // { color: '#62DAAA',  year: '2010年', type: '恶性胸腹水', data: 332 },
        // { color: '#62DAAA',  year: '2010年', type: '头颈部癌', data: 201 },
        // { color: '#62DAAA',  year: '2010年', type: '黑色素瘤', data: 914 },
        // { color: '#62DAAA',  year: '2010年', type: '肺癌', data: 1190 },
        // { color: '#62DAAA',  year: '2010年', type: '宫颈癌', data: 1530 },
        // { color: '#62DAAA',  year: '2010年', type: '胶质瘤', data: 1320 },
        // { color: '#62DAAA',  year: '2010年', type: '其他', data: 1320 },
        // { color: '#5F7293',  year: '2011年', type: '肝癌', data: 720 },
        // { color: '#5F7293',  year: '2011年', type: '恶性胸腹水', data: 632 },
        // { color: '#5F7293',  year: '2011年', type: '头颈部癌', data: 901 },
        // { color: '#5F7293',  year: '2011年', type: '黑色素瘤', data: 834 },
        // { color: '#5F7293',  year: '2011年', type: '肺癌', data: 990 },
        // { color: '#5F7293',  year: '2011年', type: '宫颈癌', data: 1230 },
        // { color: '#5F7293',  year: '2011年', type: '胶质瘤', data: 1520 },
        // { color: '#5F7293',  year: '2011年', type: '其他', data: 1400 },
      ],
      chartData3: [
        // { color: '#6495F9',  year: '2009年', type: '瘤内注射', data: 820 },
        // { color: '#6495F9',  year: '2009年', type: '静脉注射', data: 932 },
        // { color: '#6495F9',  year: '2009年', type: '动脉注射', data: 901 },
        // { color: '#6495F9',  year: '2009年', type: '胸腔内注射', data: 934 },
        // { color: '#6495F9',  year: '2009年', type: '腹腔内注射', data: 1290 },
        // { color: '#6495F9',  year: '2009年', type: '膀胱内注射', data: 1330 },
        // { color: '#6495F9',  year: '2009年', type: '其他方式', data: 1320 }
      ],
      // outterData: [ // 外圈数据
      //   { value: 1048, name: '重组人5型腺病毒', itemStyle: { color: '#76C3FE' } },
      //   { value: 735, name: 'T-VEC', itemStyle: { color: '#B8E0FF' } },
      //   { value: 580, name: 'T3011', itemStyle: { color: '#D8EEFF' } },
      //   { value: 484, name: 'Pexa-Vec', itemStyle: { color: '#F7D266' } },
      //   { value: 700, name: 'Reolysin', itemStyle: { color: '#FAE2A0' } },
      //   { value: 600, name: 'DNX-2401', itemStyle: { color: '#FBECC0' } },
      //   { value: 500, name: 'Pelareprep', itemStyle: { color: '#FDF3DA' } },
      //   { value: 900, name: 'HF10', itemStyle: { color: '#F2858C' } },
      //   { value: 800, name: 'Onys-015', itemStyle: { color: '#F6B2B5' } },
      //   { value: 100, name: '其他', itemStyle: { color: '#F9D2D5' } },
      // ],
      // innerData: [ // 内圈数据
      //   { value: 1048, name: '肝癌', itemStyle: { color: '#76C3FE' } },
      //   { value: 735, name: '恶性胸腹水', itemStyle: { color: '#B8E0FF' } },
      //   { value: 580, name: '头颈部癌', itemStyle: { color: '#D8EEFF' } },
      //   { value: 484, name: '黑色素瘤', itemStyle: { color: '#F7D266' } },
      //   { value: 700, name: '胰腺癌', itemStyle: { color: '#FAE2A0' } },
      //   { value: 600, name: '肺癌', itemStyle: { color: '#FDF3DA' } },
      //   { value: 500, name: '宫颈癌', itemStyle: { color: '#F2858C' } },
      //   { value: 900, name: '胶质癌', itemStyle: { color: '#F6B2B5' } },
      //   { value: 800, name: '其他', itemStyle: { color: '#F9D2D5' } },
      // ],
      chartData5: [],
      chartData6: [
        // { value: 1048, name: '单药', itemStyle: { color: '#76C3FE' } },
        // { value: 735, name: '联合免疫', itemStyle: { color: '#B8E0FF' } },
        // { value: 580, name: '联合化疗', itemStyle: { color: '#D8EEFF' } },
        // { value: 484, name: '联合放疗', itemStyle: { color: '#F7D266' } },
        // { value: 700, name: '联合靶向', itemStyle: { color: '#FAE2A0' } },
        // { value: 600, name: '其他', itemStyle: { color: '#FDF3DA' } }
      ]
    }
  },
  methods: {
    timeRange (dateString) {
      console.log('timeRange===========', dateString)
    },
    async fetchData () {
      const res = await this.$action('getProductStatitics')
      console.log('getProductStatitics', res)
      // 瘤种类型
      if (res && res.tumor_type_model_data) {
        console.log('tumor_type_model_data', res.tumor_type_model_data)
        this.chartData1 = res.tumor_type_model_data.map(item => {
          return {
            year: item.model,
            data: item.data,
            type: item.type
          }
        })
      }
      // 溶瘤病毒
      if (res && res.virus_type_model_data) {
        console.log('res.virus_type_model_data', res.virus_type_model_data)
        this.chartData2 = res.virus_type_model_data.map(item => {
          return {
            year: item.model,
            data: item.data,
            type: item.type
          }
        })
      }
      // T-VEC维度
      if (res && res.tvec_data) {
        console.log('res.tvec_data', res.tvec_data)
        const tvec_data_dict = {
          '文献集锦': '#76C3FE',
          '临床试验': '#B8E0FF',
          '会议进展': '#D8EEFF',
          '药企资讯': '#F7D266',
          '材料总结': '#FAE2A0'
        }
        this.chartData6 = res.tvec_data.map(item => {
          return {
            value: item.data,
            name: item.name,
            itemStyle: {
              color: tvec_data_dict[item.name]
            }
          }
        })
      }
      // 重组人5型腺病毒
      if (res && res.recombine5_data) {
        console.log('res.recombine5_data', res.recombine5_data)
        const recombine5_data_dict = {
          '文献集锦': '#76C3FE',
          '临床试验': '#B8E0FF',
          '会议进展': '#D8EEFF',
          '药企资讯': '#F7D266',
          '材料总结': '#FAE2A0'
        }
        this.chartData5 = res.recombine5_data.map(item => {
          return {
            value: item.data,
            name: item.name,
            itemStyle: {
              color: recombine5_data_dict[item.name]
            }
          }
        })
      }
      // 模块维度
      if (res && res.model_year_data) {
        console.log('res.model_year_data', res.model_year_data)
        this.chartData3 = res.model_year_data.map(item => {
          return {
            year: item.year,
            data: item.data,
            type: item.model
          }
        })
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.document-statitics-container {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0px 88px 0px;
}
</style>